<template>
	<view class="work-container">
		<!-- 搜索 -->
		<uni-row>
			<view class="select-container">
				<view class="select-input uni-input-wrapper">
					<uni-row>
						<uni-col :span="21">
							<input class="uni-input" placeholder="请输入设备编码" v-model="messageParams.phouseCode"
								@input="filterOptions" />
						</uni-col>
						<uni-col :span="3">
							<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">
								<uni-icons type="clear" size="20"></uni-icons>
							</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="select-dropdown " v-if="showOptions">
					<view v-for="item in filteredOptions" :key="item.phouseCode" class="select-dropdown-child"
						@click="item.phouseCode !== '没有匹配数据~~' && selectOption(item)">
						{{ item.phouseCode }}
					</view>

				</view>
			</view>
		</uni-row>
		<!-- 图表 -->
		<uni-section title="自动刮粪机图表" type="line"></uni-section>
		<!-- 设备轮播图 -->
		<uni-row style=" display: flex;justify-content: center;">
			<uni-col :span="24">
				<uni-swiper-dot field="content" mode="default">
					<swiper class="swiper-box" indicator-dots="true"
						style="width: 100%; height: 140px;margin-bottom:20rpx">
						<swiper-item v-for="(item, index) in scrapeList" :key="index"
							style="background-color: #efefef;">
							<view v-if="item.scrapeState==='1'" class="loading">
								<view class="uni-loading"></view>
							</view>
							<view class="swiper-item" @click.stop="tableQuery(item)">
								<uni-card class="parent-icon" shadow="hover" style="background-color: #fff;">
									<i v-if="item.scrapeState==='1'" class="uni-icon-success green-icon" title="运行"
										@click.stop="icoeUp(item)"></i>
									<i v-else-if="item.scrapeState==='2'" class="uni-icon-error rea-icon" title="关闭"
										@click.stop="icoeUp(item)"></i>




									<view class="card-content">
										<uni-row class="card-row">
											<uni-col :span="8" class="row-item">产品名称</uni-col>
											<uni-col :span="8" class="row-item">设备编码</uni-col>
											<uni-col :span="8" class="row-item">栏舍编码</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="8" class="row-item">{{ item.scrapeName }}</uni-col>
											<uni-col :span="8" class="row-item">{{ item.scrapeCode }}</uni-col>
											<uni-col :span="8" class="row-item">{{ item.phouseCode }}</uni-col>
										</uni-row>
									</view>
								</uni-card>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</uni-col>
		</uni-row>
		<!-- 数据表格 -->
		<uni-section title="自动刮粪机记录" type="line"></uni-section>
		<uni-row style=" display: flex;justify-content: center;">
			<uni-col :span="24">
				<view>
					<view class="uni-container">
						<view class="table-header">
							<!-- 表头 -->
							<view class="header-row" style="width: 100%;">
								<view class="header-cell" style="width: 20%;">设备编码</view>
								<view class="header-cell" style="width: 20%;">栏舍编码</view>
								<!-- <view class="header-cell" style="width: 20%">栏舍类型</view> -->
								<view class="header-cell" style="width: 20%">操作人</view>
								<view class="header-cell" style="width: 20%">操作</view>
								<view class="header-cell" style="width: 20%">时间</view>
							</view>
						</view>
						<scroll-view class="table-body" scroll-y="true" style=" width: 100%; height: 200px;">
							<!-- 表格数据 -->
							<view class="body-row" v-for="(item, index) in messageList" :key="index">
								<view class="body-cell msg-txt" style="width: 30%;">{{ item.scrapeCode }}</view>

								<view class="body-cell msg-txt">{{ item.phouseCode }}</view>

								<!-- <view class="body-cell msg-txt" v-if="item.phouseType == 1">
									{{$dict.selectDictLabel('hmy_park_type', 1)}} 
								</view>
								<view class="body-cell msg-txt" v-else-if="item.phouseType ==2">
									{{$dict.selectDictLabel('hmy_park_type', 2)}}
								</view>
								<view class="body-cell msg-txt" v-else-if="item.phouseType ==3">
									{{$dict.selectDictLabel('hmy_park_type', 3)}}
								</view> -->

								<view class="body-cell msg-txt">{{ item.createdBy}}</view>

								<view class="body-cell msg-txt" v-if="item.scrapeState == 1">
									{{ $dict.selectDictLabel('hmy_equipment_switch', 1) }}
								</view>
								<view class="body-cell msg-txt" v-else-if="item.scrapeState == 2">
									{{$dict.selectDictLabel('hmy_equipment_switch', 2)}}
								</view>

								<view class="body-cell msg-txt"> {{ item.startOffTime.slice(5, 16) }} </view>

							</view>
						</scroll-view>
					</view>
				</view>
			</uni-col>
		</uni-row>


		<!-- 新增加号 -->
		<!-- <uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" @fabClick="toGasAdd" /> -->
	</view>

	</div>
</template>

<script>
	import {
		list,
		selectbyid,
		add,
		del,
		edit,
		findscrapeCode,
		listMsg,
		getStart
	} from "@/api/hmy/scrape";
	import {
		findPhouseCodeAll
	} from "@/api/hmy/equipment";

	export default {
		name: "scrape",
		//dicts: ['hmy_park_type','hmy_fans_state'],
		data() {
			return {
				intervalId: null, // 用于存储定时器ID的变量
				// 存储每个轮询定时器ID的对象
				pollingIntervals: {},
				//增加的加号
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					buttonColor: '#55aa7f',
				},
				messageList: [],
				showClearIcon: false,
				filteredOptions: [], // 过滤后的选项列表
				showOptions: false, // 是否显示下拉列表
				messageParams: {
					phouseCode: ""
				},


				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 刮粪机数据
				scrapeList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 日期范围
				dateRange: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					scrapeCode: "",
					scrapeName: "",
					phouseCode: ""


				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					scrapeCode: [{
							required: true,
							message: "编号不能为空",
							trigger: "blur"
						},
						{
							validator: async (rule, value, callback) => {
								var scrapeCode = this.form.scrapeCode;
								if (scrapeCode != undefined) {
									await findscrapeCode(scrapeCode).then(response => {
										if (response.data != null) {
											callback(new Error("已存在"))
										}
									})
								}
							},
							trigger: 'blur'
						}
					],
					scrapeName: [{
						required: true,
						message: "产品名称不可为空",
						trigger: "blur"
					}],
					scrapeMaterial: [{
						required: true,
						message: "材质不能为空",
						trigger: "blur"
					}],
					scrapeProduction: [{
						required: true,
						message: "生产日期不能为空",
						trigger: "blur"
					}],
					phouseType: [{
						required: true,
						message: "栏舍类型不能为空",
						trigger: "blur"
					}],
					scrapeState: [{
						required: true,
						message: "状态不能为空",
						trigger: "blur"
					}],
					scrapePrice: [{
						required: true,
						message: "价格不能为空",
						trigger: "blur"
					}],
					scrapeRepair: [{
						required: true,
						message: "维修记录不能为空",
						trigger: "blur"
					}],
					scrapeFaul: [{
						required: true,
						message: "故障记录不能为空",
						trigger: "blur"
					}],
					phouseCode: [{
						required: true,
						message: "故障记录不能为空",
						trigger: "blur"
					}]
				}
			};
		},
		created() {
			this.getList();
		},

		beforeDestroy() {
			// 组件销毁前停止轮询
			this.stopPolling();
		},
		methods: {
			fetchEquipment(d) {
				// 查询环境信息的方法
				getStart(d.phouseCode).then(response => {
					console.log("论获取状态中")
					console.log(d.phouseCode)
					if (response.msg === "500") {
						this.icoeUp(d);
						this.stopPolling(d.phouseCode); // 使用设备或仓库的标识代码停止轮询
					}
				})
			},
			startPolling(d) {
				// 如果已经存在轮询，先停止再开启新的轮询
				if (this.pollingIntervals[d.phouseCode]) {
					this.stopPolling(d.phouseCode);
				}
				// 开启新的轮询
				this.pollingIntervals[d.phouseCode] = setInterval(() => {
					this.fetchEquipment(d);
				}, 1000 * 30); // 每30秒执行一次
			},
			stopPolling(phouseCode) {
				// 停止轮询的方法
				if (this.pollingIntervals[phouseCode]) {
					clearInterval(this.pollingIntervals[phouseCode]);
					this.pollingIntervals[phouseCode] = null; // 清除定时器ID
				}
			},
			icoeUp(d) {
				if (d.scrapeState === '1') {
					d.scrapeState = '2'
					this.msgTxt = "设备已停止";
				} else {
					d.scrapeState = '1'
					this.msgTxt = "设备已启动";
					this.startPolling(d)
				}
				edit({
					"scrapeState": d.scrapeState,
					"scrapeId": d.scrapeId,
					"phouseType": d.phouseType,
					"phouseCode": d.phouseCode,
					"scrapeCode": d.scrapeCode,
					"runningTime": d.runningTime,
					"scrapePrice": -99
				}).then(response => {
					this.$modal.msgSuccess(this.msgTxt);
					this.open = false;
					this.getList();
				});

			},
			/** 查询角色列表 */
			getList() {
				this.loading = true;
				list(this.queryParams).then(response => {
					const filteredList = response.rows.filter(item => item.scrapeState === "1");
					filteredList.forEach(d => {
						this.startPolling(d)
					});
					this.scrapeList = response.rows;

					this.total = response.total;
					this.loading = false;
				});
				/** 查询环境信息 */
				listMsg(this.messageParams).then(response => {
					this.messageList = response.data;
					console.log("信息")
					console.log(this.messageList)
					this.loading = false;
				});
			},
			clearIcon: function() {
				this.messageParams.phouseCode = '';
				this.showClearIcon = false;
				this.tableQuery()
			},
			filterOptions() {
				if (this.messageParams.phouseCode.trim() === '') {
					this.filteredOptions = [];
					this.showOptions = false;
				} else {
					this.showClearIcon = true;
					this.filteredOptions = this.parkList.filter((item) =>
						item.phouseCode.includes(this.messageParams.phouseCode)
					);
					if (this.filteredOptions.length === 0) {
						// 如果过滤后的结果为空，手动添加一条数据
						this.filteredOptions.push({
							phouseCode: '没有匹配数据~~'
						});
					}
					this.showOptions = true;
				}
			},
			selectOption(item) {
				this.messageParams.phouseCode = item.phouseCode; // 更新输入框的值
				this.showOptions = false;
				this.tableQuery()
			},
			tableQuery(item) {
				//console.log(item)
				if (item != null) {
					this.showClearIcon = true;
					if (item.phouseCode != null) {
						this.messageParams.phouseCode = item.phouseCode
					}
				}
				/** 查询环境信息 */
				listMsg(this.messageParams).then(response => {
					this.messageList = response.data;
				});
			},

			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},

			// 表单重置
			reset() {
				this.form = {
					scrapeCode: undefined,
					scrapeName: undefined,
					scrapeMaterial: undefined,
					scrapeProduction: undefined,
					scrapeRepair: undefined,
					scrapeFaul: undefined,
					scrapeState: undefined,
					scrapePrice: undefined,
					phouseType: undefined,
					phouseCode: undefined,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.dateRange = [];
				//this.resetForm("queryForm");
				this.queryParams = {};
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.scrapeId)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			//添加按钮
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加进货信息";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const scrapeId = row.scrapeId || this.ids
				selectbyid(scrapeId).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改气体交换机信息";
				});
			},

			/** 提交按钮 */
			submitForm: function() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.scrapeId != undefined) {

							edit(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							add(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const scrapeId = row.scrapeId || this.ids;
				this.$modal.confirm('是否确认删除进货编号为"' + scrapeId + '"的数据项？').then(function() {
					return del(scrapeId);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},

		}
	};
</script>
<style lang="scss">
	.loading {
		position: absolute;
		width: 100%;
		height: 400px;
	}

	.uni-loading {
		position: absolute;
		width: 100px;
		height: 100px;
		top: 15%;
		left: 33%;
		z-index: 9999;
	}

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 16px;
		line-height: inherit;
	}

	/* #endif */

	.select-container {
		position: relative;
		padding: 5px 20px;
		background-color: #F2F2F2;
	}

	.select-input {
		border-radius: 10px;
		/* 设置圆角半径为5px */
		border: 1px solid #ccc;
		/* 添加边框样式 */
		padding: 5px;
		/* 添加内边距 */
		background-color: #fff;
	}

	.select-dropdown {
		width: 80%;
		position: absolute;
		top: 100%;
		z-index: 999;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 10px;
	}

	.select-dropdown-child {
		padding: 5px 40px;
		cursor: pointer;
	}

	.card-content {
		padding: 14px;
		background-color: #ededed;
	}

	.card-row {
		margin-bottom: 5px;
		border-bottom: 1px solid #8f939c;
	}

	.row-item {
		text-align: center;
		/* 其他必要的样式 */
	}

	.parent-icon {
		position: relative;
	}

	.green-icon {
		font-size: 20px;
		position: absolute;
		right: 15px;
		top: 15px;
		color: green;
		z-index: 9;
	}

	.rea-icon {
		font-size: 20px;
		position: absolute;
		right: 15px;
		top: 15px;
		color: red;
		z-index: 9;
	}

	.header-row {
		display: flex;
		font-size: 25rpx;
		margin-bottom: 5px;
	}

	.header-cell {
		text-align: center;
		border-bottom: 1px solid #ccc;
	}

	.body-row {
		display: flex;
		font-size: 25rpx;
	}

	.body-row:nth-child(odd) .body-cell {
		background-color: #f2f2f2;
		/* 灰色背景 */
	}

	.body-cell {
		text-align: center;
		padding: 10rpx 0;
		border-bottom: 1px solid #ccc;
	}

	.msg-txt {
		flex: 1;
		text-align: center;
		font-size: 20rpx;
	}
</style>ss